






<template>
    <!--        分类栏-->
    <div class="tab-box flex-align-center-col" v-loading="showLoading">
<!--        如果加载出错则显示-->
        <span style="font-size: 30px;color: #42b983" v-show="showNotice">😵‍💫出错了,请刷新一次 </span>



<!--        标签栏+内容-->
        <transition name="el-zoom-in-center">
<!--            标签-->
            <el-tabs v-model="activeName" @tab-click="handleClick"
                     type="card"
                     v-show="showTab"
                     class="tab-items" >
                <el-tab-pane v-for="(i,index) in tabList.list"
                             :label="i.tName"
                             :name="String(i.tId)"
                             class="flex-center-col"
                             >

<!--                    内容显示区-->
                    <ArticleCard :tab-id="i.tId" ></ArticleCard>
                </el-tab-pane>
            </el-tabs>
        </transition>


    </div>
</template>

<script>

    import {computed, reactive, ref} from "@vue/reactivity";
    import axios from "axios";
    import {onMounted} from "@vue/runtime-core";
    import ArticleCard from "@/components/article/ArticleCard";

    export default {
        name: "TabBox",
        components: {ArticleCard},
        props:{
          classifyId:{
              type:Number,
              default:0
          }
        },
        setup(props,context) {


            let activeName = ref("")
            let tabList = reactive({
                list: []
            })


            let showLoading=ref(true)
            let showNotice=ref(false)
            let showTab=computed(()=>{
                const show=tabList.list.length>0
                if(!show){

                    return false
                }else{

                    showLoading.value=false
                    return true
                }

            })


            // 设置定时任务检测是否加载成功

            setTimeout(()=>{
                if(tabList.list.length<1){
                    showNotice.value=true
                }
                 showLoading.value=false

            },4000)


            function handleClick(tab, event) {

                console.log(tab, event);

            }


            function getTabs() {
                if(props.classifyId===1){
                    // 分类页面查询所有标签
                    return axios.get("/api/tabs").then(resp => resp.data)
                }else{
                    return axios.get("/api/classify/tabs?id="+props.classifyId).then(resp=>resp.data)
                }

            }


            onMounted(async () => {

                const data = await getTabs()
                if (data.code === 200) {
                    tabList.list = data.data

                }else{
                    console.log(data.msg)
                }


            })


            return {
                showLoading,
                tabList,
                handleClick,
                activeName,
                showTab,
                showNotice
            }
        }

    }
</script>

<style scoped lang="less">

    .tab-box{

        width: 100%;
        height: 600px;
        max-height: 600px;
        padding-top: 100px;
        background-color: var(--theme-color);
        .tab-items{
            width: 85%;
            height: 90%;
            color: #42b983;
            /*background-color:var(--theme-color);*/
            background-color: white;
            border-radius: 2px;


        }
    }
</style>